<template>
  <div class="table_container">
    <div class="table_top_btn">
      <div class="left_btn">
        <el-form :model="searchInfo">
          <el-form-item :label="t('myApplication.documentStatus')">
            <el-select
              v-model="searchInfo.flowStatus"
              :placeholder="t('myApplication.documentStatusPlaceholder')"
              style="width: 200px"
              @change="queryList"
            >
              <el-option
                v-for="item in filterApliStatus"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table_area">
      <el-table
        ref="assetsTableRef"
        height="100%"
        v-loading="loading"
        :data="approvalData"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column   :label="t('tableColumns.operation')"  align="center" fixed width="100">
          <template #default="{ row }">
            <div class="operate_link_btn">
              <el-link
                type="primary"
                :underline="false"
                :icon="Edit"
                :disabled="row.flowStatus != 0 ? true : false"
                @click="openAddOrEdit(['approval', 'approval'], row)"
                >{{ t("button.apply") }}</el-link
              >
            </div>
          </template>
        </el-table-column>

        <template v-for="(item, index) in columns" :key="item.key">
          <el-table-column
            v-if="item.visible"
            :prop="item.prop"
             :label="t(`tableColumns.${item.langKey}`)"
            :width="item.width"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <div
                v-if="item.prop == 'flowNo'"
                :style="{
                  color: colors.primaryColor,
                  cursor: item.isclick ? 'pointer' : '',
                }"
                @click="openAddOrEdit(['approval', 'detail'], row)"
              >
                {{ row.flowNo }}
              </div>
              <el-tag
                v-else-if="item.prop == 'auditStatus'"
                :type="
                  row.auditStatus == 2
                    ? 'success'
                    : row.auditStatus == 0 || row.auditStatus == 1
                    ? 'warning'
                    : 'danger'
                "
              >
                {{
                  filterStatus(
                    row.auditStatus,
                    "approvalStatusByMyself",
                    "id",
                    "langKey"
                  ) || "无"
                }}</el-tag
              >
              <el-tag type="primary" v-else-if="item.prop == 'flowTypeName'">
                {{ row[item.prop] }}
              </el-tag>

              <span v-else-if="item.prop == 'addDatetime'">
                {{ parseTime(row[item.prop], "{y}-{m}-{d}") || "无" }}
              </span>

              <span v-else>{{ row[item.prop] || "无" }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>

    <!-- 审批对话框  -->

    <approvalDialog
      class="approval_dialog"
      v-if="operate.openObj.visible"
      ref="addOrEditDialogRef"
      :loadingApproval="loadingApproval"
      v-model:add-edit-info="operate"
      @submitApproval="submitApproval"
      @cancel="cancel"
    ></approvalDialog>
  </div>
</template>

<script setup name="AssetisList">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import colors from "@/assets/styles/variables.module.scss";
import { Edit, Delete } from "@element-plus/icons-vue";
import approvalDialog from "./approvalDialog.vue";
import {
  GetApprovalList,
  AuditApproval,
  getApprovalDetail,
} from "@/api/assetsManage/approval";
import { getUserInfo } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { approvalByMySelfColums } from "@/utils/table/columns";
import { approvalStatusByMyself } from "@/utils/statuData";
const { proxy } = getCurrentInstance();
const filterApliStatus = proxy.getTranslatedOptions(approvalStatusByMyself);

const approvalData = ref([]); //资产列表数据
const loading = ref(false);
const loadingApproval = ref(false); //获取审批明细
const columns = approvalByMySelfColums;

const searchInfo = reactive({
  flowStatus: -1,
});
const operate = reactive({
  openObj: {
    visible: false,
    openKey: "", //add edit detail
    openType: "", //维修 报废 退还 领用....
    openTitle: "",
    tableTitle: "",
    addLoading: false, //防止重复提交
  },
  formInfo: {},
  tableData: [],
});

const addOrEditRef = ref(null);
//1111获取列表
const queryList = () => {
  const params = {
    type: 1,
    // userId: parseInt(JSON.parse(getUserInfo()).userId),
    userId: JSON.parse(getUserInfo()).userId,
    ...searchInfo,
  };
  loading.value = true;
  GetApprovalList(params)
    .then((res) => {
      loading.value = false;
      approvalData.value = res.output;
    })
    .catch((err) => {
      loading.value = false;
    });
};

//222添加修改相关
const openAddOrEdit = (typeKey, row) => {
  const type = typeKey[0];
  const key = typeKey[1];
  const title = `
  <span style="font-size:12px;color:#111">${row.flowTypeName}</span>
  ${"<br/>"} <span style="font-size:14px;">${row.title}</span>`;
  operate.openObj = {
    visible: true,
    openKey: key,
    openType: type,
    openTitle: title,
    tableTitle: t("myApplication.documentAssetsDetail"),
    addLoading: false,
  };

  operate.formInfo = {
    ...row,
  };
  queryApprovalDetail();
};

const submitApproval = async (key, info) => {
  const params = {
    flowNo: info.flowNo,
    auditId: info.auditId,
    auditStatus: key == "pass" ? 2 : 3,
    causeRejection: key == "pass" ? "" : info.rejectReason,
  };
  const msg = key == "pass" ? t("message.approvalPassed") : t("message.approvalRejected");
  console.log("canshu ", params);
  // return
  try {
    await AuditApproval(params);
    await ElMessage({
      message: `${t("common.document")}: ${info.flowNo} ${msg}`,
      type: "success",
    });
    await cancel();
    await queryList();
  } catch (error) {}
};

const queryApprovalDetail = () => {
  const params = {
    flowNo: operate.formInfo.flowNo,
    flowTypeId: operate.formInfo.flowTypeId,
  };
  loadingApproval.value = true;
  getApprovalDetail(params)
    .then((res) => {
      operate.tableData = res.output;
      loadingApproval.value = false;
    })
    .catch(() => {
      operate.tableData = [];
      loadingApproval.value = false;
    });
};

const cancel = () => {
  operate.openObj.visible = false;
  operate.tableData = [];
};

onMounted(() => {
  queryList();
});
</script>
<style lang="scss" scoped>
.table_container {
  padding: 0;
}
.table_top_btn {
  display: flex;
  align-items: center;
  justify-content: start;
}
.approval_dialog .dialog_title {
  display: flex;
  font-weight: 700;
  align-items: center !important;
}
</style>
